<template>
  <div>
    <el-card>
      <el-form inline>


        <el-form-item label="分类名称：" class="mgb-0" prop="fname">
          <el-input v-model="group.fname"></el-input>
        </el-form-item>
        <el-form-item label="分类编码：" class="mgb-0" prop="fnumber">
          <el-input v-model="group.fnumber"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="handleSearchData()"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="handleClearData()"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--    style="margin-top: 10px"-->
    <el-card style="margin-bottom: 10px">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="handleAdd()">新增</el-button>
      </div>
      <el-table :data="pages.rows" ref="select" v-loading="tableLoading"   style="width: 100%">
        <el-table-column label="序号"  type="index" width="55"></el-table-column>
        <el-table-column label="分类名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="分类编码" prop="fnumber" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right;margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pages.pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="pages.totalRows">

      </el-pagination>
    </el-card>
    <add_group v-if="showPage.add" :groupAdd="groupOne"   @close="handle_close($event)"></add_group>
    <detail_group v-if="showPage.detail"  :group="groupOne" :fid="fid"  :parentId="fparentid" @close="handle_close($event)"></detail_group>
    <edit_group v-if="showPage.update" :groupEdit="groupOne" :fid="fid"  :parentId="fparentid" @close="handle_close($event)"></edit_group>
  </div>

</template>

<script>


import Group from "@/api/psyManage/Group";
import add_group from "@/views/psyManage/components/add_group";
import detail_group from "@/views/psyManage/components/detail_group";
import edit_group from "@/views/psyManage/components/edit_group";
export default {
  name: "group",

  components:{
    add_group,
    detail_group,
    edit_group
  },
  data() {
    return {
      group: {
        fname: '',
        fnumber: '',
      },
      fid:'',
      fparentid:'',
      tableLoading: '',
      pages: {
        rows: [],
        page: 1, //当前页面
        pageSize: 10, // 当前页数
        totalRows: 0, // 总条数
      },
      showPage: {
        add: false,
        detail: false,
        update: false,
        check:false,
      },
      groupOne:{}

    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const http = new Group();
      this.tableLoading=true;
      http.queryList(this._getData()).then(res => {
        this.tableLoading=false;
        this.pages = res.data;
        console.log(res.data)
      })
    },
    // 当前页数修改时
    handleSizeChange(pageSize) {
      this.pages.pageSize = pageSize
      this.init();
    },
    // 当前页码修改时
    handleCurrentChange(page) {
      this.pages.page = page
      this.init();
    },
    //清除检索
    handleClearData() {
      this.group.fname = '';
      this.group.fnumber = "";
      this.init();
    },
    //检索
    handleSearchData() {
      this.init();
    },
    /*
  * 新增
  * */
    handleAdd(data){
      this.showPage.add=true;
    },
    /**
     * 修改
     */
    handleUpdate(data) {
      this.groupOne = data;
      this.showPage.update = true;
    },

    handle_delete(){
      const selectData=this.$refs.select.selection
      if (selectData.length<1){
        this.$tie.showError('请至少选择一条数据')
        return
      }
      console.log(selectData)

    },
    /**
     * 删除
     */
    handleDelete (data) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: `删除中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let http = new Group()
        this.groupOne=data
        console.log(this.groupOne)
        http.delete(this.groupOne).then(res => {

          loading.close()
          this.init();
          this.$tie.showSuccess("删除成功！")
        }).catch(e => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    handle_close(obj){
      if(obj.name==="add"){
        this.showPage.add=false;
      }
      if(obj.name==="update"){
        this.showPage.update=false;
      }
      if (obj.name === 'detail') {
        this.showPage.detail = false;
      }
      if (obj.name === 'check') {
        this.showPage.check = false;
      }
      if(obj.isRefresh){
        this.init();
      }
      console.log(obj)
    },
    /**
     * 详情
     */
    handleDetail(data) {
      this.groupOne = data;
      this.showPage.detail = true;
    },
    /**
     * 获取检索对象和分页对象
     * @private
     */
    _getData() {
      const data = this.group;
      console.log(data);
      data.page = this.pages.page;
      data.pageSize = this.pages.pageSize;
      return data;
    },

  }
}
</script>
<style scoped>

</style>
